<template>
  <div class="app-pro-basicLayout-content-wrap" style="margin: 0;display:flex;">
    <div class="app-pro-pages-content" style="height: calc(100vh - 60px);">
      <div class="classify-box_body-wrapper" style="width:420px">
        <div class="submenu">
          <div class="main-card">
            <div class="main-table-toolbar">
              <div class="main-table-toolbar-title" style="line-height:30px">
                <div class="main-table-toolbar-title-only" style="font-weight:bold">
                  메뉴 관리
                  <el-tooltip class="item" effect="dark" content="해당하는 메뉴를 클릭하다" placement="top">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="main-table-toolbar-option">
                <el-button type="primary" size="mini" icon="el-icon-plus" style="margin-right:5px" @click="createMenu()">추가</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-link :underline="false" class="main-table-toolbar-item-icon">
                  <el-tooltip class="item" effect="dark" content="초기화" placement="top">
                    <i @click="getMenuList()" class="el-icon-refresh-right"></i>
                  </el-tooltip>
                </el-link>
              </div>
            </div>
            <div
              class="main-table-wrapper"
              v-loading="listLoading"
              element-loading-text="가져오는 중"
              element-loading-spinner="el-icon-loading"
              element-loading-custom-class="element-loading-index-2"
            >
              <Tree
                :data="treeData"
                :horizontal="true"
                :collapsable="collapsable"
                :label-class-name="labelClassName"
                :render-content="renderContent"
                @on-expand="onExpand"
                @on-node-click="onNodeClick"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="app-pro-pages-content" style="height: calc(100vh - 60px);flex:1;background:rgba(255,255,255,1)">
      <div class="setting-pages-content_body-wrapper">
        <div class="setting-pages-content_wrapper" style="margin-bottom:51px;display:flex; padding:20px;justify-content: space-around;overflow-y: auto;height:calc(100vh - 100px)">
          <div style="flex:1 1 auto;flex-direction: column;display: flex;">
            <h3 :style="{color:currentNode.value?'#1890ff':''}">{{currentNode.label}}</h3>
            <div class="tree-panel " style="display:flex;justify-content: center;align-items: center;flex: 1 1 auto;">
              <el-form ref="form" :model="form" label-width="100px" style="width:50%;min-width:400px">
                <el-form-item label="메뉴 이름">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="상위 메뉴">
                  <el-cascader
                    style="width:100%"
                    v-model="form.pid"
                    :options="options"
                    :props="{ checkStrictly: true }"
                    placeholder="메뉴 상위 부분을 선택하십시오."
                    clearable
                    @change="handleChange">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="메뉴 경로">
                  <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="메뉴 아이콘">
                  <icon-picker v-model="form.icon"></icon-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">간수하다</el-button>
                  <el-button v-if="currentNode.value" style="float:right" type="danger" @click="deleteMenu">삭제</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as menuApi from '@/api/setting/menu'
import Tree from '_c/Tree'
import { changeOption } from '@/utils'
export default {
  name: 'setting-menu',
  data () {
    return {
      listLoading: false,
      treeData: {
        value: 0,
        label: '메뉴',
        children: []
      },
      collapsable: false,
      expandAll: true,
      labelClassName: 'bg-white',
      currentNode: {
        label: '추가',
        value: 0
      },
      options: [],
      form: {
        name: '',
        pid: 0,
        path: '',
        icon: ''
      }
    }
  },
  components: {
    Tree
  },
  mounted () {
    this.getMenuList()
  },
  methods: {
    getMenuList () {
      this.listLoading = true
      menuApi.getMenuList().then(res => {
        this.listLoading = false
        this.treeData.children = res
        this.options = changeOption(res, { value: 'id', label: 'name' })
      })
    },
    createMenu () {
      this.currentNode = {
        label: '추가',
        value: 0
      }
      this.form = {
        name: '',
        pid: 0,
        path: '',
        icon: ''
      }
    },
    deleteMenu () {
      menuApi.deleteMenu({ id: this.currentNode.value }).then(res => {
        this.getMenuList()
        this.createMenu()
      })
    },
    handleChange () {

    },
    onSubmit () {
      if (this.currentNode.value) {
        const data = this.form
        data.id = this.currentNode.value
        console.log(data)
        menuApi.updateMenu(data).then(res => {
          this.getMenuList()
        })
      } else {
        const data = this.form
        data.pid = this.form.pid[this.form.pid.length - 1]
        console.log(data)
        menuApi.createMenu(data).then(res => {
          this.getMenuList()
        })
      }
    },
    renderContent (h, data) {
      return h('div', {
        domProps: {
          className: 'className'
        },
        on: {

        }
      }, data.label)
    },
    onExpand (data) {
      if ('expand' in data) {
        data.expand = !data.expand

        if (!data.expand && data.children) {
          this.collapse(data.children)
        }
      } else {
        this.$set(data, 'expand', true)
      }
    },
    onNodeClick (e, data) {
      if (data.label !== '메뉴') {
        this.currentNode = data
        this.form = {
          name: data.label,
          pid: data.pid,
          path: data.path,
          icon: data.icon
        }
      }
    },
    collapse (list) {
      var _this = this
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false
        }
        child.children && _this.collapse(child.children)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .element-loading-index-2 {
  z-index: 2;
  min-height: 100px;
}
</style>
